
<script setup>
import { values } from "lodash";
import { ref, watch, computed } from "vue";

const uploadRef = ref();
const fileList = ref([])
const editor = ref(false)
const formData = ref({
    size:16,
    space:0
})
const submitUpload = () => {
    // console.log(fileList.value)

 

    
  //   uploadRef.value!.submit()
};

const props = defineProps(["visible","data"]);
const emit = defineEmits(["update:visible"]);

console.log(props);
let dialogVisible = ref(false);

watch(
  () => props.visible,
  (nv, ov) => {
    if (nv) {
      dialogVisible = nv;
      console.log(props.data)
      editor.value = false
      if(props.data.image){
        editor.value = true
        formData.value={
          size:props.data.size,
          space:props.data.space
        }
      }
    }
  }
);
function onSaveInfo(){


    if(editor.value){
      
      emit("saved",{
                ...formData.value,
                fileName:props.data.fileName,
                image:props.data.image,
                editor:editor.value
            })
            onDialogClose()

      return
    }
  
    fileList.value.forEach(v=>{

        var reader = new FileReader()
      
        reader.readAsDataURL(v.raw)
        reader.onload=function(){
        //    console.log(reader.result)

        const image=new Image();
        image.src=reader.result
   
        const fileName= v.raw.name

        image.onload=function(){
                emit("saved",{
                ...formData.value,

                fileName:fileName,
                image:image,
                editor:editor.value
            })
            onDialogClose()
            }
        }


    })



}
function onDialogClose() {
  dialogVisible = false;
  emit("update:visible", false);
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="导入资源"
    width="30%"
    draggable
    @close="onDialogClose"
  >
    <el-upload
      ref="uploadRef"
      class="upload-demo"
      action="#"
      :auto-upload="false"
      v-model:file-list="fileList"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
   
    </el-upload>
    <el-input v-model="formData.size" placeholder="格子大小" />
    <el-input v-model="formData.space" placeholder="间距" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onDialogClose">取消</el-button>
        <el-button type="primary" @click="onSaveInfo">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
</style>